<template>
  <el-card>
    <el-row>
      <el-col :span="12">
        <el-select
          v-model="boatId"
          :placeholder="$t('boat.pleSelVscode')"
          size="large"
          style="width: 240px"
          filterable
          @change="change"
        >
          <el-option
            v-for="item in list"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <span>{{$t('boat.boatInfo')}}</span>
        <div class="infos">
          <div v-for="(column, idx) in boatColumns" :key="idx" class="line">
            <div class="lable">{{ column.lable }}</div>
            <div class="value">{{ vesselsInfo[column.key] }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <span>{{$t('boat.saleInfo')}}</span>
        <div class="infos">
          <div v-for="(column, idx) in saleColumns" :key="idx" class="line">
            <div class="lable">{{ column.lable }}</div>
            <div class="value">{{ saleInfo[column.key] }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <span>{{$t('boat.repaireInfo')}}</span>
        <div>
          <div class="none" v-if="!maintainList.length">{{$t('boat.unrepaireInfo')}}</div>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in maintainList"
              :key="index"
              :timestamp="activity.maintainDate"
            >
              {{ activity.maintainPerson }} {{ $t('boat.in') }} {{ activity.maintainPlace }} {{ $t('boat.wordDesc') }} {{ activity.maintainAmount }}
              <span>{{ activity.depict }}</span>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue'
//引入请求
import { codeGetInfo, codeGetAll } from '@/api/boat/vesscode'
//引入ts类型
import { ElMessage } from 'element-plus'
import { typeArr } from './type'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

//分页器当前页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(10)
let total = ref<number>(0)
let list = ref([])
//控制抽屉显示与隐藏的字段
let drawer = ref<boolean>(false)
let skuInfo = ref<any>({})
//组件挂载完毕
onMounted(() => {
  getVessCodes()
  setTimeout(()=> {
    console.log('AAAAAAAAAA', boatColumns);

  }, 5000)
})

const getVessCodes = async () => {
  let { status, data, msg } = await codeGetAll({VesselsCode: ''})
  if (status == 200) {
    list.value = data
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}

const change = (e) => {
  getInfo(e)
}
const auths = {
  add: '/sys/permission/add',
  edit: '/sys/permission/edit',
  del: '/sys/permission/del',
}
const boatColumns = computed(() => [
  { lable: t('boat.model'), key: 'model' },
  { lable: t('boat.brand'), key: 'brandName' },
  { lable: t('boat.type'), key: 'typeName' },
  { lable: t('boat.engibes'), key: 'engines' },
  { lable: t('boat.feature'), key: 'feature' },
  { lable: t('boat.des'), key: 'depict' },
  { lable: t('boat.cssd2'), key: 'draft' },
  { lable: t('boat.cc2'), key: 'length' },
  { lable: t('boat.ck2'), key: 'maxBeam' },
  { lable: t('boat.zdhs2'), key: 'maxSpeed' },
  { lable: t('boat.zdzz2'), key: 'maxWeightLb' },
])

const saleColumns = computed(() => [
  { lable: t('boat.cusName'), key: 'name' },
  { lable: t('boat.cusPhone'), key: 'phoneNumber' },
  { lable: t('boat.cusEmail'), key: 'email' },
  { lable: t('boat.saleMan'), key: 'salePerson' },
  { lable: t('boat.saleMoney'), key: 'saleAmount' },
  { lable: t('boat.salePlace'), key: 'salePlace' },
  { lable: t('boat.saleTime'), key: 'saleDate' },
  { lable: t('boat.des'), key: 'depict' },
])
let vesselsInfo = reactive({
  id: '',
  model: '',
  mainImageUrl: '',
  brandName: '',
  typeName: '',
  crew: '',
  draft: '',
  length: '',
  maxBeam: '',
  maxSpeed: '',
  maxWeightLb: '',
  feature: '',
  depict: '',
  engines: '',
})
let saleInfo = reactive({
  name: '',
  phoneNumber: '',
  email: '',
  vesselsId: '',
  customerId: '',
  saleAmount: '',
  saleDate: '',
  salePerson: '',
  salePlace: '',
  saleNum: '',
  depict: '',
})
let maintainList = ref([])
const getInfo = async (VesselsCode) => {
  //当前分页器的页码
  let { status, data, msg } = await codeGetInfo({VesselsCode})
  if (status == 200) {
    let { tVesselsInfo, tSaleInfo, maintainInfoList } = data
    Object.keys(vesselsInfo).forEach((key) => {
      vesselsInfo[key] = tVesselsInfo[key]
    })
    Object.keys(saleInfo).forEach((key) => {
      saleInfo[key] = tSaleInfo[key]
    })
    saleInfo.name = `${tSaleInfo.customerFirstName || ''} ${tSaleInfo.customerLastName || ''}`
    maintainList.value = maintainInfoList
  } else {
    ElMessage({ type: 'error', message: msg })
  }
}
</script>

<style lang="scss" scoped>

  span {
    display: block;
    font-weight: 600;
    margin: 30px 0;
  }
.infos {

  display: inline-block;
  .line {
    display: flex;
    border-bottom: 1px solid #747474;
    line-height: 1.5;
    padding: 5px 20px;

    .lable {
      width: 200px;
    }
  }
}
</style>
